@extends('admin.layout.main')
@section('content')
    <link rel="stylesheet" href="{{asset('/css/bootstrap-switch.css')}}">
    <style type="text/css">
      .left-filter{margin-left:8px;}
    </style>
    <section class="content-header">
      <h1>
        公众号消息
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 公众号消息</a></li>
        <li class="active">消息列表</li>
      </ol>
    </section>
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-12 col-xs-6">
                <div class="box">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-sm-10">
                                <a href="javascript:void(0)" class="add-info"><i class="fa fa-fw fa-plus"></i>新增消息</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table style="table-layout: fixed" class="table table-bordered table-hover" id="user-list">
                            <div class="dataTables_filter">
                                <form action="" method="GET">
                                    <button type="submit" class="btn btn-info btn-sm">查询:</button><input type="search" placeholder="请输入关键字" name="keywords" class="form-control input-sm" value="{{$keywords}}">
                                </form>
                            </div>
                            <thead>
                                <tr>
                                    <th style="width: 50px"><a style="cursor:pointer" class="all_check">全选</a></th>
                                    <th>消息内容</th>
                                    <th>消息类型</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>    
                            <tbody> 
                                @foreach($messages as $msg)
                                    <tr id="{{$msg->id}}">
                                        <td><input type="checkbox" name="checkbox_member" class="checkbox_member" user-id="{{$msg->id}}"></td>
                                        <td style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px">{!! $msg->raw_content !!}</td>
                                        <td>@if($msg->type == 1) 循环推送 @elseif($msg->type == 2) 定时推送 @elseif($msg->type == 3) 关键字回复 @endif</td>
                                        <td>
                                            <div class="switch switch-mini">
                                                <input name="status" type="checkbox" @if($msg->status == 1) checked @endif/>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)" class="msg-edit"><i class="fa fa-fw fa-edit"></i>编辑</a>
                                            <a href="javascript:void(0)" class="msg-del"><i class="fa fa-fw fa-remove"></i>删除</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$messages->links()}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- datepicker -->
    <script src="{{asset('/js/bootstrap-switch.min.js')}}"></script>
    <script type="text/javascript">
        $(function () {
            $('#user-list').DataTable({
              "paging": false,
              "lengthChange": false,
              "searching": false,
              "info": false,
              "autoWidth": true,
              "columns": [
                {"orderable": false},
                {"orderable": false},
                {"orderable": true},
                {"orderable": true},
                {"orderable": false}
              ]
            });
        });

        $('.all_check').click(function(){
            $('.checkbox_member').click();
        });

        $('.add-info').click(function(){
            dialog_params('/admin/wx_message/create', '新增消息');
        });

        $('.msg-edit').click(function(){
            var msg_id = $(this).parents('tr').attr('id');
            dialog_params('/admin/wx_message/edit/'+msg_id, '编辑消息');
        });

        $('[name="status"]').bootstrapSwitch({  
            onText: "启用",  
            offText: "停止",  
            onColor: "success", 
            offColor: "danger", 
            size: "mini",  
            onSwitchChange:function(event, state){ 
                var msg_id = $(this).parents('tr').attr('id'),
                    status = 0;
                if (state == true) {
                    status = 1;
                }
                $.ajax({
                    url:"/admin/wx_message/toggle/"+msg_id,
                    method:"GET",
                    data:{"status": status},
                    dataType:"json",
                    success:function (data) {
                        if (data.flag) {
                            bootbox.alert('设置成功');
                        } else {
                            console.log('---网络忙---');
                        }
                    }
                });
            }  
        });

        $('.msg-del').click(function(){
            var that = $(this),
            msg_id = that.parents('tr').attr('id');
            bootbox.confirm("是否删除消息?", function(result){
                if (result) {
                    $.ajax({
                        url:"/admin/wx_message/del/"+msg_id,
                        method:"GET",
                        data:{},
                        dataType:"json",
                        success:function (data) {
                            if (data.flag) {
                                that.parents('tr').remove();
                            } else {
                                console.log('---网络忙---');
                            }
                        }
                    });
                }
            });
        });

    </script>
@endsection      